<template>
    <div class="box box_mm">
        <div class="box_main">
            <div class="search_box">
                <div style="display: flex; height: 100%">
                    <div class="search_item">
                        <span style="width: 0.5rem">时间</span>
                        <el-date-picker
                            v-model="search_name"
                            type="month"
                            value-format="YYYY-MM"
                            placeholder="选择月份" 
                            style="width: 2rem"
                            @change="search"/>
                    </div>
                </div>
                <div class="search_item">
                    <el-button
                        type="primary"
                        class="btn_bgcolor"
                        @click="search"
                        >搜索</el-button
                    >
                    <el-button type="info" @click="reset">重置</el-button>
                </div>
            </div>
            <div class="box_cont">
                <div class="btn_list">
                    <!-- <el-button class="mybtn btn_bgcolor" type="primary" @click="daochu">导出</el-button> -->
                </div>
                <div
                    class="mytabbox"
                    style="
                        height: 81vh;
                        padding-top: 10px;
                        box-sizing: border-box;
                    ">
                    <Table
                        :tableheader="tableheader"
                        :tabledata="tabledata"
                        ref="mytable"
                        :showcz="false">
                    </Table>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, provide } from "vue";
import Table from "@/components/Table.vue";
import { post } from "../../../api/request";
import { ElMessage, ElMessageBox } from "element-plus";

//搜索字段
let search_name = ref("");
let search_type = ref(0);
//定义表头的数据
const tableheader = ref([
    { key: "orderCode", name: "订单编号", width: "" },
    { key: "hut_name", name: "回收地点", width: "" },
    { key: "product_num", name: "重量", width: "" },
    { key: "product_money", name: "价格", width: "" },
    { key: "saleTime", name: "时间", width: "" },
    { key: "product_name", name: "类型", width: "" },
]);
//定义表格的数据
let tabledata = ref([]);
const mytable = ref({ currentp: 1 });

// 在 onMounted 钩子中发送请求
onMounted(() => {
    console.log(mytable.value?.currentPage);
    getdata();
});

const getdata = () => {
    post({
        url: "/api/data/datagoodsindex",
        data: {
            mouth: search_name.value, //搜索名称
            p: mytable.value?.currentPage, //当前页数
            size: 15, //每页显示数量
        },
    }).then((res: any) => {
        console.log(res)
         mytable.value.total = Number(res.data.count)||0
        tabledata.value = res.data.list;
    });
};
const search = () => {
    mytable.value.currentPage = 1;
    getdata();
};
const reset = () => {
    search_name.value = "";
    search_type.value = 0;
    mytable.value.currentPage = 1;
    getdata();
};

provide("getdata", getdata);
</script>

<style lang="scss" scoped>
@import url("../index.scss");
</style>
